import React from "react"
import { TodoApi } from '../../../../api/model/todo'
import FilterTitle from "../FilterTitle"
import FilterPicker from "../FilterPicker"
import './index.scss'



// FilterTitle组件的 控制高亮
const titleSatatus = {
  area: false,
  mode: false,
  price: false,
  more: false
}

// 设置默认选中值
const selectedValue = {
  area: ['area', 'null'],
  mode: ['null'],
  price: ['null'],
  more: []
}

type Props = {
  onFilter: any,
}

export default class Filter extends React.Component<Props> {
  
  state = {
    // 控制高亮
    titleSatatus,
    // 遮蔽罩
    isMask: false,
    // 是否显示
    onType: '',
    // 筛选数据
    filterData: [],
    selectedValue
  }

  componentDidMount() {
    this.getHousesCondition()
  }

  async getHousesCondition() {
    const id = JSON.parse(localStorage.getItem('hkzf_city') || '').value
    TodoApi.getHousesCondition({id}).then((res: any) =>{
      // console.log(res)
      const {area, subway, rentType, price} = res.body
      this.setState({
        filterData: {
          area: [area, subway],
          mode: rentType,
          price: price
        }
      })
    })
  }
  
  // 子组件向父组件的通信 
  onTitleClick = (type: string) => {
    // console.log(this.state)
    this.setState((prevState: any) => {
      return {
        titleSatatus: {
          ...prevState.titleSatatus,
          [type]: true
        },
        isMask: true,
        onType: type,
      }
    })
  }

  // 隐藏遮蔽罩
  noneMaskClick = () => {
    this.setState({
      isMask: false
    })
  }

  // onSubmit 确定
  onSubmit = (e:any) => {
    console.log('选中的数据：', {[this.state.onType]: e})
    this.setState({
      selectedValue: {...this.state.selectedValue, [this.state.onType]: e},
      isMask: false
    })
    this.props.onFilter({[this.state.onType]: e})
  }

  // 取消
  onCancel= () => {
    console.log()
    this.setState({
      selectedValue: {...this.state.selectedValue, [this.state.onType]: selectedValue[this.state.onType]},
      isMask: false,
      titleSatatus: {...this.state.titleSatatus, [this.state.onType]: false}
    })
  }

  render() {
    return (
      <div className="filter">
        {/* 遮蔽罩 */}
        <div className="filter_mask" style={{opacity: this.state.isMask ? '100%' : '0',
        zIndex: this.state.isMask ? '996' : '-1' }}
        onClick={this.noneMaskClick} />
        
        <div className="filter_content">
          <FilterTitle titleSatatus={this.state.titleSatatus} onClick={this.onTitleClick}></FilterTitle>
          
          {
            (this.state.isMask && (this.state.onType === 'area' || this.state.onType === 'mode' || this.state.onType === 'price'))
            ? <FilterPicker filterData={this.state.filterData} name={this.state.onType} 
            selectedValue={this.state.selectedValue} onSubmit={this.onSubmit} onCancel={this.onCancel}
            defaultValue={this.state.selectedValue[this.state.onType]}/> : null
          }
        </div>
      
      </div>
    )
  }
}